<template>
    <div class="page-container">
        <header-nav/>
        <div class="act-boxes act-bc-white">
            <hgroup class="act-boxes-hgroup act-green">
                <h2>{{$t('message.home.title')}}</h2>
                <h5>RECENT <span class="act-black">ACTIVITIES</span></h5>
            </hgroup>
            <div class="act-boxes-lists">
                <dl class="act-boxes-item" v-for="item in activityList" :key="item.ActivityID" @click="navigateTo(item)">
                    <dd class="act-boxes-rahmen act-bc-silver">
                        <img :src="item.HeadLogo" alt="活动图片">
                        <span class="rahmen-status-0" v-if="item.DateNow<=item.StartTime">{{$t('message.home.status[0]')}}</span>
                        <span class="rahmen-status-1" v-if="item.DateNow>item.StartTime&&item.DateNow<item.EndTime">{{$t('message.home.status[1]')}}</span>
                        <span class="rahmen-status-2" v-if="item.DateNow>=item.EndTime">{{$t('message.home.status[2]')}}</span>
                    </dd>
                    <dt class="act-boxes-info act-b-silver">
                        <p class="act-boxes-title act-double-els">{{item.Theme}}</p>
                        <p class="act-boxes-time act-els act-gray">
                            <!-- <van-icon name="clock"/> -->
                            <span>{{item.ThemeTime}}</span>
                        </p>
                        <p class="act-boxes-site act-els act-gray">
                            <!-- <van-icon name="location"/> -->
                            <span>{{item.Adress}}</span>
                        </p>
                        <p class="act-boxes-tips act-green"><span>{{item.ActivityPrice}}</span><span>{{item.AttendNumber}}{{$t('message.home.signed')}}</span></p>
                    </dt>
                </dl>
            </div>
            <div class="act-btn-other" v-show="!isHideOtherBtn" @click="clickViewOther">{{$t('message.home.more')}} +</div>
        </div>
        <media :query="{minWidth: 768}">
            <footer-nav/>
        </media>
    </div> 
</template>

<script>
import { mapGetters } from 'vuex';
import Media from 'vue-media';
import Header from '../components/header';
import Footer from '../components/footer';
export default {
    name: 'ListPage',
    data() {
        return {
            activityList: [],
            viewOtherCounter: 0,
            isHideOtherBtn: false
        };
    },
    components: {
        'header-nav': Header,
        'footer-nav': Footer,
        Media
    },
    computed: {
        ...mapGetters([
            'allActivityList'
        ])
    },
    created() {
        this.$store.dispatch('getActivityListApi');
    },
    methods: {
        clickViewOther () {
            let counter = this.viewOtherCounter;
            counter++;
            this.activityList = this.allActivityList.filter((item, index) => {
                if (index < (12 * counter + 12)) {
                    return item;
                }
            });
            if (this.activityList.length == this.allActivityList.length) {
                this.isHideOtherBtn = true;
            }
            this.viewOtherCounter = counter;
        },
        navigateTo(item) {
            if (item.Pattern == 0) { // 随意模式
                window.location.href = '#/sign/' + item.ActivityID;
            } else if (item.Pattern == 3) { // 活动支付模式
                window.location.href = '#/entry/' + item.ActivityID;
            } else if (item.Pattern == 5) { // 微官网模式
                window.location.href = '#/micro?st=' + item.ActivityID;
            } else {
                this.$toast('当前活动模式：' + item.Pattern);
            }
        }
    },
    watch: {
        allActivityList: function(val, oldVal) {
            this.activityList = val.filter((item, index) => index < 12);
        }
    }
};
</script>

<style>
@import "../assets/css/ActivityList.css"
</style>
